<!-- 单位选择组件，单选 -->
<template>
  <van-action-sheet v-model="showCompo" :close-on-click-overlay="false" @closed="closeSheet"  title="单位选择" cancel-text="确定">
    <view class="tree-container">
      <!-- <input v-model="filterText" placeholder="输入关键字进行过滤" /> -->
      <van-field
          v-model="filterText"
          label=""
          placeholder="输入关键字进行过滤"
          :clearable="true"
      />
      <ly-tree :tree-data="treeData"
               :props="props"
               ref="tree"
               node-key="deptId"
               show-radio
               checkOnClickNode
               :highlightCurrent="true"
               :defaultCheckedKeys="selectNode"
               :default-expanded-keys="expandKeys"
               @node-click="handleNodeClick"
               :filter-node-method="filterNode"
               child-visible-for-filter-node
      />
    </view>
  </van-action-sheet>
</template>

<script>

export default{
  props: {
    showOrgtree:{
      type: Boolean,
      default: false
    },
    //机构树要显示的节点和隐藏的节点
    nodeData: {
      showNode: {
        type: String,
        default: ''
      },
      hideNode: {
        type: String,
        default: ''
      }
    },
    //当前选中的节点
    drafterDeptData:{
      //单位id
      drafterDeptId: {
        type:String,
        default: ''
      },
      //单位名称
      drafterDeptName: {
        type:String,
        default: ''
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    showOrgtree(val){
      this.showCompo = val
    },
    //当前选中的节点
    drafterDeptData:{
      handler(val, oVal) {
        if(this.util.isNotEmpty(val)){
          if(this.util.isNotEmpty(val.drafterDeptId)){
            this.selectNode.push(val.drafterDeptId)
          }
          this.deptName = val.drafterDeptName
          this.deptCode = val.drafterDeptId
        }

      },
      immediate: true,
      deep: true
    },
    nodeData: {
      handler(newName, oldName) {
        // if(this.util.isNotEmpty(newName)){
        this.getOrgTree()
        // }
      },
      immediate: true,
      deep: true
    },
  },

  data(){
    return{
      showCompo:false,//组件是否显示
      expandKeys: ["0","002","002001"],//默认展开的节点-对应的deptId的值
      props: function() {
        return {
          // 这里的label就可以使用函数进行自定义的渲染了
          // label(data, node) {
          // 	return '节点' + node.data.personName;
          // },
          label: 'deptName', // 指把数据中的‘personName’当做label也就是节点名称
          children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
        }
      },
      filterText:'',
      treeData: [],
      deptName:'',//选中的单位信息
      deptCode:'',//选中的单位信息
      selectNode:[]
    }
  },
  mounted() {
    //从缓存加载单位树
    // this.getOrgTree()
  },

  methods: {
    closeSheet(){
      let orgInfo = {orgName:this.deptName,deptCode:this.deptCode}
      this.$emit('closeOrgTreeSheet',orgInfo)
    },
    handleNodeClick(obj) {
      if(obj.checked == true){
        this.deptName = obj.data.deptName
        this.deptCode = obj.data.deptId
      }else{
        this.deptName = ''
        this.deptCode = ''
      }
    },
    //呈报单位查询
    filterNode(value, data) {
      if (!value) return true;
      return data.deptName.indexOf(value) !== -1;
    },
    //加载呈报单位树
    getOrgTree(){
      var _this = this
      this.$http({
        url: this.$http.adornUrl(`/caac/platform/org/depts/orgDeptTree`),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
          'showNode':this.nodeData.showNode,//只查管理局的树
          'hideNode':this.nodeData.hideNode

        })
      }).then(({data}) => {
        // console.log("单位信息data: " + JSON.stringify(data.data));
        if(data.code==200){
          this.treeData = this.util.treeDataTranslate(data.data,'deptId','parentId')
          // console.log("orgTree: " + JSON.stringify(orgTree));

        }

      })
    },
  }
}
</script>

<style>
.van-action-sheet{
  z-index: 9999;
  min-height: 80%;
}
</style>
